import { observer } from 'mobx-react'
import React, { useEffect } from 'react'
import store from './store'
import FillOccupation from './components/FillOccupation'
import Chart from './components/Chart'

const CareerRedact = () => {
    const { chartList, getFiveFingerCharts, clearData } = store || {}

    useEffect(() => {
        getFiveFingerCharts()
        return () => {
            clearData()
        }
    }, [])

    return <>{chartList.length > 0 ? <Chart /> : <FillOccupation />}</>
}

export default observer(CareerRedact)
